<template>
    <div>
        <ContentHead title="创建项目" content="从这里开始,创建一个令人愉快的项目" ref="contentHead"></ContentHead>
        <div style="background: #fff;width: 100%;padding: 16px 0">
            <div class="baseInfo">
                <div style="padding-right: 32px">
                    <base-info @changeApp="changeApp" ref="baseInfo"></base-info>
                    <db-list ref="dbList"></db-list>
                    <Config :tempApp="tempApp" ref="config"></Config>
                    <div style="width: 100%;text-align: center;">
                        <Button type="primary" @click="createApp">在GitLab上创建</Button>
                    </div>
                </div>
                <Anchor show-ink :offset-top="87">
                    <AnchorLink href="#basic_usage" title="基础信息" />
                    <AnchorLink href="#static_position" title="数据库配置" />
                    <AnchorLink href="#app_config" title="插件配置" />
                </Anchor>
            </div>
        </div>
    </div>
</template>

<script>
    import BaseInfo from './step/BaseInfo';
    import DbList from './step/DbList';
    import Config from './step/Config';
    export default {
        data(){
            return {
                app: {
                    appDbList:[{
                        name: '',
                        dbType: 'mysql',
                        dbUrl: '',
                        dbPort: '',
                        dbPassword: '',
                        dbUser: '',
                        isMaster: '1'
                    }],
                    appConfigList: [{
                        code: '',
                        config: '',
                        groupName: ''
                    }],
                    crudTableMap: {},
                },
                tempApp: null
            };
        },
        components: {
            BaseInfo,
            DbList,
            Config
        },
        created(){

        },
        methods:{
            changeApp(app){
                this.tempApp = app;
            },
            async createApp(){
                let result = await Promise.all([
                    this.$refs['baseInfo'].getData(),
                    this.$refs['dbList'].getData(),
                    this.$refs['config'].getData()
                ]);
                let app  = Object.assign({}, result[0], result[1], result[2]);
                this.$axios.post('/mdo/api/v1/app/create', app).then(res => {
                    this.$Message.info('success');
                    this.$router.push({name: 'project'});
                }).catch(e =>{
                    this.$Message.error(e.response.data);
                });
            }
        }
    };
</script>

<style lang="less">
    .baseInfo{
        height: auto;
        width: 1024px;
        margin: 0 auto;
        min-height: 500px;
        display: flex;

        .head-project {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                width: 120px;
                padding: 6px 0;
                border-bottom: 1px solid @primary-color;
                span {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            border-bottom: 1px solid @border-color-base;
            margin-bottom: 16px;
        }
    }
</style>